<template>
  <div class="content-view">
    <a-card :bordered="false">
      <a-steps class="steps" :current="currentTab">
        <a-step v-if="isShow" :title="$t('all.autotext1358')" description="请填写真实信息" />
        <a-step v-if="isShow" :title="$t('all.autotext1341')" :description="$t('all.autotext953')"/>
        <a-step :title="$t('all.autotext569')" :description="resetPwdDescription" />
      </a-steps>
      <div class="content">
        <PerfectInformation v-if="isShow && currentTab === 0" @nextStep="nextStep" @userInfo="userInfo"/>
        <Certification
          v-if="isShow && currentTab === 1"
          @nextStep="nextStep"
          @backStep="backStep"
          :info="info"
        />
        <ResetPwd v-if="currentTab === 2" />
      </div>
    </a-card>
  </div>
</template>

<script>
import PerfectInformation from './PerfectInformation'
import Certification from './Certification'
import ResetPwd from './ResetPwd'
import { mapActions } from 'vuex'
import storage from 'store'
import { ACCESS_TOKEN, ACCESS_TOKEN_TEMP } from '@/store/mutation-types'

export default {
  name: 'StepForm',
  components: {
    PerfectInformation,
    Certification,
    ResetPwd
  },
  data () {
    return {
      currentTab: 2,
      form: null,
      info: {},
      isShow: false
    }
  },
  computed: {
    resetPwdCheck () {
      /**
       * this.$route.query.type 1-首次登录重置密码 2-超过90天重置密码
       */
      return [1, 2].includes(+this.$route.query.type)
    },
    pwdExpiration () {
      return +this.$route.query?.type === 2
    },
    resetPwdDescription () {
      return this.pwdExpiration
        ? this.$t('all.autotext753')
        : this.$t('all.autotext628')
    }
  },
  beforeRouteLeave (to, form, next) {
    if (this.resetPwdCheck && to.name !== 'login') {
      return next(false)
    }
    // 用户使用浏览器返回时需要清除登录信息，让用户重新登录
    this.logout()
    next()
  },
  mounted () {
    if (this.resetPwdCheck) {
      this.isShow = false
      this.currentTab = 2
      this.preventRouteByUrl()
    }
  },
  methods: {
    ...mapActions({
      logout: 'Logout'
    }),
    // 存储本次登录的 token 用于修改密码接口，但是要清除掉已经登录的信息，防止用户通过浏览器输入地址直接跳转
    preventRouteByUrl () {
      storage.set(ACCESS_TOKEN_TEMP, storage.get(ACCESS_TOKEN))
      this.logout()
    },
    backStep () {
      if (this.currentTab > 0) {
        this.currentTab -= 1
      }
    },
    nextStep () {
      if (this.currentTab < 2) {
        this.currentTab += 1
      }
    },
    userInfo (info) {
      this.info = info
    }
  }
}
</script>

<style lang="less" scoped>
  .steps{
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .content-view{
    width: 1200px;
    margin: 20px auto 0 auto;
  }
</style>
